<template>
  <div class="inspect-content">
    <SubEditDropDown
      v-for="(inspectItem, inspectIndex) in list"
      :key="`SubEditDropDown${inspectIndex}`"
      :dropdownTitle="`${inspectItem.inspectItemContent}`"
      :isDropdown="false"
    >
      <template v-slot:content>
        <!-- 抄表项 -->
        <MeterReadingContent
          v-if="inspectItem.inspectItemType === 1"
          :data="inspectItem.contentItemDTOList"
          :eqpName="eqpName"
          :propsValue="[...propsValue, inspectIndex, 'contentItemDTOList']"
          :disabled="disabled"
          :validated="validated"
        />
        <!-- 判断项 -->
        <JudgeContent
          v-else
          :type="type"
          :data="inspectItem.contentItemDTOList"
          :propsValue="[...propsValue, inspectIndex, 'contentItemDTOList']"
          :disabled="disabled"
          :validated="validated"
        />
      </template>
    </SubEditDropDown>
    <px-checkbox v-model="data.inspectTaskMissDTO.checked" label="异常上报" size="large" />
    <!-- 异常上报 -->
    <div v-if="data.inspectTaskMissDTO.checked" ref="resultRef">
      <px-row getter="22">
        <px-col :span="24">
          <px-form-item
            label="责任人"
            :prop="[...propsValue.slice(0, propsValue.length - 1), 'inspectTaskMissDTO', 'principalId']"
            :rules="[{ required: true, message: '责任人不能为空', trigger: ['change', 'blur'] }]"
          >
            <px-select-v2
              v-model="data.inspectTaskMissDTO.principalId"
              :options="principalList"
              filterable
              clearable
              placeholder="请选择责任人"
              @change="val => principalChange(data.inspectTaskMissDTO, val)"
            />
          </px-form-item>
        </px-col>
        <px-col :span="12">
          <px-form-item
            label="缺失类型"
            :prop="[...propsValue.slice(0, propsValue.length - 1), 'inspectTaskMissDTO', 'missingType']"
            :rules="[{ required: true, message: '缺失类型不能为空', trigger: ['change', 'blur'] }]"
          >
            <px-radio-group v-model="data.inspectTaskMissDTO.missingType" class="ml-4">
              <px-radio v-for="item in typesOption" :key="item.label" :label="item.label" size="large">{{ item.value }}</px-radio>
            </px-radio-group>
          </px-form-item>
        </px-col>
        <px-col :span="12">
          <px-form-item
            label="缺失等级"
            :prop="[...propsValue.slice(0, propsValue.length - 1), 'inspectTaskMissDTO', 'missingLevel']"
            :rules="[{ required: true, message: '缺失等级不能为空', trigger: ['change', 'blur'] }]"
          >
            <px-radio-group v-model="data.inspectTaskMissDTO.missingLevel" class="ml-4">
              <px-radio v-for="item in levelOption" :key="item.label" :label="item.label" size="large">{{ item.value }}</px-radio>
            </px-radio-group>
          </px-form-item>
        </px-col>
      </px-row>
      <px-row getter="22">
        <px-col :span="12">
          <px-form-item label="缺失位置">
            <px-cascader
              disabled
              style="width: 100%"
              :model-value="inspectArea"
              :props="cascaderProps"
              :options="inspectAreaOption"
              placeholder="请选择"
            />
          </px-form-item>
        </px-col>
        <px-col :span="12">
          <px-form-item label="详细位置" :prop="[...propsValue.slice(0, propsValue.length - 1), 'inspectTaskMissDTO', 'missingDetailPosition']">
            <px-input v-model="data.inspectTaskMissDTO.missingDetailPosition" placeholder="请输入详细位置" maxlength="50" clearable />
          </px-form-item>
        </px-col>
      </px-row>
      <px-form-item
        label="异常说明"
        :prop="[...propsValue.slice(0, propsValue.length - 1), 'inspectTaskMissDTO', 'missingDesc']"
        :rules="[{ required: true, message: '异常说明不能为空', trigger: ['change', 'blur'] }]"
      >
        <px-input
          v-model="data.inspectTaskMissDTO.missingDesc"
          type="textarea"
          placeholder="请输入异常说明"
          :autosize="{ minRows: 2, maxRows: 4 }"
          maxlength="1000"
          clearable
        />
      </px-form-item>
      <px-form-item label="异常照片" :prop="[...propsValue.slice(0, propsValue.length - 1), 'inspectTaskMissDTO', 'missingPictureList']">
        <PhotoUpload
          photoType="add"
          :photoList="data.inspectTaskMissDTO.missingPictureList"
          :photoData="{ moduleName: moduleName }"
          @changePhotoList="changePhotoList"
        />
      </px-form-item>
    </div>
  </div>
</template>
<script setup lang="ts">
import PhotoUpload from "@/components/Upload/PhotoUpload.vue";
import { reactive, ref, onMounted, onBeforeUnmount, computed, watchEffect } from "vue";
import SubEditDropDown from "../../components/SubEditDropDown.vue";
import JudgeContent from "./JudgeContent.vue";
import MeterReadingContent from "./MeterReadingContent.vue";
import { emitter } from "../config/index";
import { useInspectArea, usePrincipal } from "../hooks/index";
const props = defineProps(["propsValue", "disabled", "validated", "list", "type", "eqpName"]);
const data: any = defineModel("data");

const moduleName = "ifp-digitaltwins";
const cascaderProps = {
  children: "children",
  label: "name",
  value: "id",
  checkStrictly: true
};
const envOption = reactive([
  {
    label: "ENV",
    value: "环境缺失"
  }
  // {
  //   label: "6S",
  //   value: "6S"
  // }
]);
const eqpOption = reactive([
  {
    label: "EQP",
    value: "设备缺失"
  }
]);
const levelOption = ref([]);
const { inspectArea, inspectAreaOption } = useInspectArea();
const { principalList } = usePrincipal();
onMounted(() => {
  emitter.on("levelOptionChange", (val: { label: string; value: string }[]) => {
    levelOption.value = val;
  });
});
onBeforeUnmount(() => {
  emitter.off("levelOptionChange");
});
const typesOption = computed(() => {
  if (props.type === "env") {
    return envOption;
  } else {
    return eqpOption;
  }
});

watchEffect(() => {
  if (!data.value.inspectTaskMissDTO) {
    return;
  }
  if (Object.keys(data.value.inspectTaskMissDTO).length > 1) {
    data.value.inspectTaskMissDTO.checked = true;
  }
});
const changePhotoList = val => {
  data.value.inspectTaskMissDTO.missingPictureList = val;
};
// 责任人修改
const principalChange = (data, val) => {
  data.principalName = principalList.find(item => item.value === val)?.label;
  // console.log(data, val, "principalChange");
};
</script>
<style lang="scss" scoped>
.inspect-content {
  width: 100%;
}
</style>
